<template>
    <div class="main">
            <van-nav-bar
  title="个人中心"
  right-text="设置"
  @click-right="onClickRight"
  class="van1"
/>
     
      <div class="name"><img src="../assets/heard_img.jpg" alt="" class="name_img"></div><br>
       <span class="mains"> <h3>{{this.user.name}}</h3></span>
       <span class="mains"> <h4>一家有品位的麻辣烫店</h4></span>
      <div class="nav"><span class="span1">关注</span><span class="span1">|</span><span class="span1">粉丝</span></div>
   <br>
        <div class="list">
          <mt-cell title="我的帖子">
                    <span>{{this.user.id}}<img src="../assets/right.png" alt=""></span>
                    <img slot="icon" src="../assets/invite.png" width="24" height="24">
                    </mt-cell>
            <mt-cell title="年龄">
                    <span>{{this.user.age}}<img src="../assets/right.png" alt=""></span>
                    <img slot="icon" src="../assets/ae.png" width="24" height="24">
                    </mt-cell>
            <mt-cell title="联系电话">
                    <span>{{this.user.phone}}<img src="../assets/right.png" alt=""></span>
                    <img slot="icon" src="../assets/电tel.png" width="24" height="24">
                    </mt-cell>
            <mt-cell title="性别">
                    <span>{{this.gender}}<img src="../assets/right.png" alt=""></span>
                    <img slot="icon" src="../assets/sex.png" width="24" height="24">
                    </mt-cell>
            <mt-cell title="历史">
                    <span>0<img src="../assets/right.png" alt=""></span>
                    <img slot="icon" src="../assets/history.png" width="24" height="24">
                    </mt-cell>
            <mt-cell title="下载管理">
                    <span>0<img src="../assets/right.png" alt=""></span>
                    <img slot="icon" src="../assets/download.png" width="24" height="24">
                    </mt-cell>
            <mt-cell title="我的收藏">
                    <span>5<img src="../assets/right.png" alt=""></span>
                    <img slot="icon" src="../assets//collect.png" width="24" height="24">
                    </mt-cell>
        </div>
    <button @click="logout()" class="btn1">注销</button>
  
    </div>
</template>
<script>
import { Indicator } from 'mint-ui';
export default {
    name:"my_home",
    data() {
        return {
          selected:"个人中心",
          user:{},
          gender:""
        }
    },
    methods: {
        onEdit(){},
      logout(){
        Indicator.open();
        var tokens=sessionStorage.getItem("token");
        var str=`token=${tokens}`
        this.axios.post("/user/logout",str).then((pro)=>{
            if(pro.data.code==200){
                sessionStorage.removeItem("token");
                sessionStorage.removeItem("user");
                this.$router.push("/login").catch(e=>{});
                Indicator.close();
            }else{
                Indicator.close();
                alert("错误");
            }
        })
        },
        onClickRight(){
            this.$router.push({
                path:'/change_info',
                query:{
                    id:this.user.id
                }
            })
        }
    },

    mounted() {
        // this.user=this.$store.state.user;
        this.user=JSON.parse(sessionStorage.getItem("user"))
        if(this.user.gender==2){
            this.gender="女"
        }else{
            this.gender="男"
        }
        
    },
    destroyed() {
        
    },
    filters:{

       
    }
}
</script>
<style scoped>
.mains{
    text-align: center;
}
.btn1{
    width: 90%;
    height: 10vw;
    border: none;
     outline:none;
    border-radius :3vw 3vw 3vw 3vw;
    background-color: #e71308;
    color:wheat;
    font-size: 20px;
    text-align: center;
    margin: 0 5%;
    margin-bottom: 30%;
    
}
a{
     text-decoration:none;
}
.name {
    overflow: hidden;
    width: 25vw;
    height: 25vw;
    border-radius: 50% 50% 50% 50%;
    background:red;
    position: relative;
    left: 36.5%;
}   
.name_img{
    width: 200%;
    height: 200%;
      position: relative;
   right: 38%;
}
.van1{
    background-color: #04384321;
}
.nav{
    margin:0 auto;
    width: 90vw;
    height: 10vw;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 5px 5px ;
}
.span1{
    line-height: 10vw;
    padding: 0 13%;
}

.list>ul>li{
    width: 100%;
    border-bottom: 1px solid rgb(179, 103, 73);
}

.mint-cell-wrapper{
    display: flex;
    justify-content: space-between;
    
}
.mint-cell-title{
    flex: none
    !important;
}
</style>